import { defineStore } from 'pinia';
import { store } from '@/store';
import { ComponentInternalInstance } from 'vue';

export interface GuideStep {
  title: string;
  description: string;
  style?: {
    width: number;
    height: number;
    left: number;
    top: number;
  };
  nodeInfo?: {
    selector: string;
    ins: any
  }
}

export interface GuideState {
  homeSteps: GuideStep[];
  chatSteps: GuideStep[];
}

export enum GuideType {
  HOME = 'home',
  CHAT = 'chat',
}

const createState = (): GuideState => ({
  homeSteps: [],
  chatSteps: [],
});

export const useGuideStore = defineStore({
  id: 'guide',
  state: () => createState(),
  getters: {},
  actions: {
    /** 添加引导 */
    addGuide(index: number, step: GuideStep, type: GuideType) {
      if (type === GuideType.HOME) {
        this.homeSteps.splice(index, 0, step);
      } else {
        this.chatSteps.splice(index, 0, step);
      }
    },
    /** 清除引导 */
    clearGuide(type: GuideType) {
      if (type === GuideType.HOME) {
        this.homeSteps = [];
      } else {
        this.chatSteps = [];
      }
    },
  },
});

export function useGuideStoreWithOut() {
  return useGuideStore(store);
}
